<template>
  <view>
    <view class="order-box">
      <view class="sn-body">
        <u-image
          :src="domain + detail.kuaidi.logo"
          height="60"
          width="60"
          shape="circle"
          error-icon="car-fill"
          loading-icon="car-fill"
        />
        <view style="margin-left: 20rpx">
          <u-text
            :text="detail.kuaidi.name || '待发货'"
            block
            color="#979797"
            size="14"
            lines="1"
            line-height="30"
          />
          <u-text
            :text="detail.kuaidi.tel || '-'"
            block
            color="#979797"
            mode="phone"
            size="14"
            call
            line-height="30"
          />
        </view>
      </view>
    </view>
    <view class="order-box">
      <u-steps
        current="0"
        active-icon="car-fill"
        active-color="#3BA199"
        inactive-icon="checkmark-circle-fill"
        inactive-color="#969799"
        direction="column"
      >
        <u-steps-item
          v-for="(i, k) in detail.express"
          :key="k"
          :title="i.status + ' ' + i.time"
          :desc="i.context"
        />
      </u-steps>
    </view>
  </view>
</template>

<script>
import config from "@/request/baseUrl.js";
import { myLogistics } from "@/request/myApi.js";
export default {
  data() {
    return {
      domain: config.baseUrl,
      orderId: "", // 订单ID
      detail: {},
    };
  },
  onLoad(e) {
    this.orderId = e.id;
    this.getData();
  },

  methods: {
    getData() {
      myLogistics({ id: this.orderId }).then((res) => {
        if (res.code == 1) {
          this.detail = res.data;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.order-box {
  padding: 20rpx 30rpx;
  margin: 20rpx;
  box-shadow: 0px 0px 10px rgba(186, 186, 186, 0.2);
  border-radius: 10px;
  margin-bottom: 30rpx;
  .sn-body {
    display: flex;
  }
}
</style>
